<template>
	<view class="popup-push">
		<view class="nav-title">{{mContont.title}}</view>
		<view class="nav-contont">
			<view class="content-text">
				{{mContont.contont}}
			</view>
			<view class="content-end">{{mContont.zhici}}</view>
			<view class="content-date">{{mContont.time}}</view>
		</view>
		<view class="nav-bottom">
			<view class="left-tupiao" @tap="$emit('onDelete')">
				<image class="tupiao" src="../../static/images/xiaoxi/delete.png" mode="widthFix"></image>
				<view class="text">删除</view>
			</view>
			<view class="center-btn" @tap="$emit('onClose')">
				<button class="btn" type="default">关闭</button>
			</view>
			<view class="kong"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			
		},
		data() {
			return {
				mContont: {
					title: '柜组系统故障，请及时维护',
					contont: `柜组系统故障，请及时维护。因检测到本柜组，系统异常，无法运行。
							请呼叫管理员，查看异常原因。修 复后，在使用！ 柜组系统故障，请及时维护。
							因检测到本柜组，系统异常，无法运行。请呼叫管理员，查 看异常原因。修复后，
							在使用！ 柜组系统故障，请及时维护。因检测到本柜组，系统异常，无法运行。请 呼叫管理员，
							查看异常原因。修复后，在使用！ 柜组系统故障，请及时维护。因检测到本柜组，系统异常 ，
							无法运行。请呼叫管理员，查看异常原因。修复后，在使用！ 柜组系统故障，请及时维护。
							因检测到本 柜组，系统异常，无法运行。请呼叫管理员，查看异常原因。修复后，在使用！`,
					zhici: '特此！请相关人员尽快处理',
					time: '2020-12-15 15:30:00'		
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.popup-push{
		// width: 2400rpx;
		// height: 1316rpx;
		width: 83.3vw;
		height: 86vh;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		.nav-title{
			width: 100%;
			// height: 132rpx;
			height: 8.63vh;
			border-radius: 20rpx 20rpx 0 0;
			background: #4F9AFF;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 48rpx;
			color: #FFFFFF;
		}
		.nav-contont{
			width: 100%;
			padding: 48rpx 56rpx 0 56rpx;
			box-sizing: border-box;
			.content-text{
				font-size: 40rpx;
				text-indent: 2em;
				color: #515151;
			}
			.content-end{
				display: flex;
				justify-content: flex-end;
				margin-top: 44rpx;
				font-size: 40rpx;
				color: #777777;
			}
			.content-date{
				display: flex;
				justify-content: flex-end;
				margin-top: 44rpx;
				font-size: 36rpx;
				color: #777777;
			}
		}
		.nav-bottom{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			// height: 200rpx;
			height: 13.1vh;
			padding: 0 88rpx;
			display: flex;
			align-items: center;
			flex: 1;
			justify-content: space-between;
			border-top: 2rpx solid #EEEEEE;
			box-sizing: border-box;
			.left-tupiao{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				width: 33%;
				height: 100%;
				.tupiao{
					width: 44rpx;
					height: 44rpx;
					margin-right: 16rpx;
				}
				.text{
					font-size: 44rpx;
					color: #FF4F4F;
				}
			}
			.center-btn{
				width: 33%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				.btn{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 346rpx;
					height: 96rpx;
					font-size: 48rpx;
					color: #FFFFFF;
					background: #4F9AFF;
					border-radius: 96rpx;
				}
			}
			.kong{
				width: 33%;
				height: 100%;
			}
		}
	}
</style>
